<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <section>
      <p>基本信息</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="学生名称：" prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入名称，最多可添加15个字"
            style="width: 250px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生手机号：" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入合法的手机号"
            style="width: 170px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="学员头像：" prop="headerimg">
          <el-upload
            class="upload-demo"
            action="http://120.53.31.103:84/api/public/img"
            :headers="headers"
            :on-success="handlePreview"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              300*300像素或1:1，支持jpg、jpeg、png,小于5M
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：">
          <el-col :span="7">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="所在城市：" prop="area">
          <el-select
            v-model="provinces"
            @change="provinceClick"
            placeholder="请选择"
          >
            <el-option
              v-for="item in province"
              :key="item.id"
              :label="item.area_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="citys" @change="cityClick" placeholder="请选择">
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.area_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="countys"
            @change="countyClick"
            placeholder="请选择"
          >
            <el-option
              v-for="item in county"
              :key="item.id"
              :label="item.area_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import Breadcrumb from "../../components/Breadcrumb";
export default {
  name: "StudentEdit",
  components: { Breadcrumb },
  data() {
    return {
      ruleForm: {
        username: "",
        phone: "",
        sex: -1,
        birthday: ""
      },
      // 省份
      province: [],
      provinces: "",
      provinceId: "",
      city: [],
      citys: "",
      cityId: "",
      county: [],
      countys: "",
      countyId: "",
      rules: {
        username: [
          { required: true, message: "学员姓名不能为空", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "学员手机号不能为空", trigger: "blur" }
        ]
      },
      //设置header头
      headers: {
        Authorization: sessionStorage.getItem("token")
      },
      images: ""
    };
  },
  mounted() {
    // 请求省份
    this.$axios.province().then(res => {
      console.log(res);
      this.province = res.data.data;
    });
  },
  methods: {
    // 保存
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let { data: res } = await this.$axios.update({
            attr: [],
            avatar: this.images,
            birthday: this.ruleForm.birthday,
            city_id: this.cityId,
            district_id: this.countyId,
            mobile: this.ruleForm.phone,
            nickname: this.ruleForm.username,
            province_id: this.provinceId,
            sex: this.ruleForm.sex,
            user_attr: "[]"
          });
          console.log(res);
          if (res.code != 200) {
            this.$message.error(res.msg);
          } else {
            this.$message.success(res.msg);
            this.$router.push("/index/User/Student");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传成功时的钩子函数
    handlePreview(file) {
      console.log(file);
      if (file.code == 200) {
        this.images = file.data.path;
      }
    },
    // 选中省份
    provinceClick(id) {
      console.log(id);
      this.provinceId = id;
      this.$axios.city(id).then(res => {
        console.log(res);
        this.city = res.data.data;
      });
    },
    // 选中市
    cityClick(id) {
      console.log(id);
      this.cityId = id;
      this.$axios.city(id).then(res => {
        console.log(res);
        this.county = res.data.data;
      });
    },
    // 选中区域
    countyClick(id) {
      this.countyId = id;
    }
  }
};
</script>

<style lang="scss" scoped>
section {
  padding: 10px;
  & > p {
    border-left: 3px solid blue;
    text-indent: 10px;
    margin-bottom: 20px;
  }
}
.el-select {
  width: 150px;
  margin-right: 10px;
}
</style>
